<template>
  <div class="main">
    <div class="left">
      <component :is="Components"></component>
    </div>
    <div class="right">
      <div class="buttons">
        <button v-for="(item, index) in buttonName" :key="index" @click="changeComponent(item)">
          {{ item.name }}
        </button>
      </div>
      <div class="back" @click="back"><button>返回</button></div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, provide } from "vue";
import { useRoute, useRouter } from "vue-router";
import editMusicVue from "./components/editMusic.vue";
import editTimeVue from "./components/editTime.vue";
import fenquVue from "./components/fenqu.vue";
// import { onMounted } from "vue";
const Components = ref(editTimeVue);
const router = useRouter();
const route = useRoute();
const buttonName = ref([
  {
    Components: editTimeVue,
    name: "时间编辑",
  },
  {
    Components: editMusicVue,
    name: "音源编辑",
  },
  {
    Components: fenquVue,
    name: "分区编辑",
  },
]);
const changeComponent=(item)=>{
    Components.value=item.Components
}
const back=()=>{
    router.push({path:"/setTimePoint"})
}

provide('changeComponent',changeComponent);



onMounted(()=>{
    // console.log("路由",route.query.data)
})
</script>
<style lang="less" scoped>
@import url("./addTimingPointView.less");
</style>